import React, { Component } from 'react'
import { Modal, Button, Table, Row, Popconfirm, Col } from 'antd'


export default class TypeList extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  componentDidMount() {
    // debugger
  }


  render() {
    const _self = this
    const {
      //columns,
      dataSource,
      loading,
      onDelete,
      onUserInfo,
      onUserRole,
      } = this.props
    // 表格展示项的配置

    const columns = [
      {
        title: '姓名',
        dataIndex: 'username',
        key: 'username',
        //render: (text, record, index) => <span>{text}</span>,
      },
      {
        title: '职务',
        dataIndex: 'post',
        key: 'post',
      },
      {
        title: '帐号',
        dataIndex: 'usercode',
        key: 'usercode',
      },
      {
        title: '角色',
        dataIndex: 'role',
        key: 'role',
        render: (text, record, index) => <div className='roletext'
                                              onClick={onUserRole.bind(this, record.usercode)}>{text.map((role, index) => {
          return <span key={index}>{role.rolename}<br/></span>
        })}</div>
      },
      {
        title: '操作',
        key: 'operate',
        fixed: 'right',
        width: 80,
        render: function (text, record, index) {
          return (
            <span className="a_jxy">
                <Popconfirm title="删除?" onConfirm={onDelete.bind(this, record.id)}>
                  <a>删除</a>
                </Popconfirm>

                <span className="ant-divider"/>
                <a onClick={onUserInfo.bind(this, record.usercode)}>详情</a>
              </span>
          )
        },
      },
    ]
    console.log(this.props.dataSource)
    return (
      <div className="detail-content">
        <Row gutter={16}>
          {
            <Col sm={24} md={24} lg={24}>
              <div className="detail-box">
                <Table
                  columns={columns}
                  dataSource={dataSource}
                  loading={loading}
                />
              </div>
            </Col>
          }
        </Row>
      </div>
    )
  }
}
